<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title data-i18n="resources.title_tiledMapLayer"></title>
    <link rel='stylesheet' href='../../mapbox-gl.css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .mapboxgl-marker {
            width: 10px;
            height: 10px;
            background: red;
            margin-top: -5px;
            margin-left: -5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="../../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapbox-gl-dev.js"></script>
    <script type="text/javascript" src="../../iclient9-mapboxgl.js"></script>
    <script type="text/javascript">
        $.getJSON('../../data/earthquakes.geojson', function (result) {
             map = new mapboxgl.Map({
                container: 'map', // container id
                style: {
                    "version": 8,
                    "glyphs": "http://iclsvr.supermap.io/iserver/services/map-mvt-California/rest/maps/California/tileFeature/sdffonts/{fontstack}/{range}.pbf",
                    "sources": {
                        "raster-tiles": {
                            "type": "raster",
                            "tiles": ['http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'],
                            "tileSize": 256
                        }
                    },

                    "layers": [{
                        "id": "simple-tiles",
                        "type": "raster",
                        "source": "raster-tiles",
                        "minzoom": 0,
                        "maxzoom": 22
                    }]
                },
                center: [-103.59179687498357, 40.66995747013945],
                zoom: 3
            });
            map.on('load', function () {
                map.addSource("earthquakes", {
                    type: "geojson",
                    data: result,
                    cluster: true,
                    clusterMaxZoom: 14, // Max zoom to cluster points on
                    clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
                });

                map.addLayer({
                    id: "clusters",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["has", "point_count"],
                    paint: {
                        "circle-color": [
                            "step",
                            ["get", "point_count"],
                            "#51bbd6",
                            100,
                            "#f1f075",
                            750,
                            "#f28cb1"
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "point_count"],
                            20,
                            100,
                            30,
                            750,
                            40
                        ]
                    }
                });

                map.addLayer({
                    id: "cluster-count",
                    type: "symbol",
                    source: "earthquakes",
                    filter: ["has", "point_count"],
                    layout: {
                        "text-field": "{point_count_abbreviated}",
                        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                        "text-size": 12
                    }
                });

                map.addLayer({
                    id: "unclustered-point",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["!", ["has", "point_count"]],
                    paint: {
                        "circle-color": "#11b4da",
                        "circle-radius": 4,
                        "circle-stroke-width": 1,
                        "circle-stroke-color": "#fff"
                    }
                });

                map.on('click', 'clusters', function (e) {
                    console.log(e.point);
                    console.log(e.lngLat);
                    var features = map.queryRenderedFeatures(e.point, {
                        layers: ['clusters']
                    });
                    var clusterId = features[0].properties.cluster_id;
                    console.log(features);
                    map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (
                        err, zoom) {
                        if (err)
                            return;
                        console.log(features[0].geometry.coordinates);
                        map.easeTo({
                            center: features[0].geometry.coordinates,
                            zoom: zoom
                        });
                       // map.panTo( features[0].geometry.coordinates);
                    });
                });

                map.on('mouseenter', 'clusters', function () {
                    map.getCanvas().style.cursor = 'pointer';
                });
                map.on('mouseleave', 'clusters', function () {
                    map.getCanvas().style.cursor = '';
                });
            });
        })

    </script>

</body>

</html>
